<template>
  <div class="comment">
    <div v-if="totalNum > 0" class="title">评论<span class="count">（{{ totalNum }}）</span></div>
    <div v-if="enableComment" class="box">
      <img src="@/assets/images/default-avatar.png" class="avatar" />
      <input type="text" class="input" placeholder="说点什么吧">
      <van-button size="small" :color="themeColor" @click="postComment">发表</van-button>
    </div>    
    <van-loading v-if="!hasComments && showLoading" class="loading" :color="themeColor" type="spinner">加载中...</van-loading>
    <div v-if="hasComments" class="comment-list">
      <comment-item
        v-for="item in comments"
        :key="item.rpid"
        :comment="item"
        @select="handleCommentSelect"
      />
    </div>
    <van-popup
        ref="popRef"
        :style="{top: '255px'}"
    >
      <comment-reply
        :comment="currentComment"
      />
    </van-popup>
  </div>
</template>

<script>
import { ref, inject, computed } from 'vue'
import { Button as VanButton, Loading as VanLoading, Toast } from 'vant'
import CommentItem from './item'
import CommentReply from './reply'
import VanPopup from '@/components/Popup'
export default {
    name: 'Comment',
    components: {
        VanButton,
        VanLoading,
        CommentItem,
        CommentReply,
        VanPopup
    },
    props: {
        // 评论数据 不包括全部的
        comments: {
            type: Array
        },
        // 评论总数
        totalNum: {
            type: Number
        },
        // 是否允许评论
        enableComment: {
            type: Boolean,
            default: true
        },
        showLoading: {
            type: Boolean,
            default: true
        }
    },
    setup(props) {
        const popRef = ref(null)
        const themeColor = inject('themeColor')
        const currentComment = ref(null)
        const hasComments = computed(() => props.comments.length > 0)
        const handleCommentSelect = item => {
            currentComment.value = item
            openPopup()           
        }

        const openPopup = () => {
            popRef.value?.show()
        }
        
        const postComment = () => {
            Toast('功能开发中，请稍候...')
        }

        return {
            popRef,
            themeColor,
            currentComment,
            postComment,
            hasComments,
            handleCommentSelect
        }
    }
}
</script>

<style lang="scss" scoped>
  .loading{
    display: flex;
    justify-content: center;
  }
  .comment{
    position: relative;
    padding: {
      left: 10px;
      right: 10px;
    }
    .title{
      height: 43px;
      line-height: 43px;
      font-size: 16px;
      color: $color-text-primary;
      .count{
        color: $color-text-secondary;
      }
    }
    .box{
      display: flex;
      align-items: center;
      margin-top: 6px;
      .avatar{
        display: block;
        width: 25px;
        height: 25px;
        padding: 5px;
        border-radius: 50%;
        background-color: $color-grey;
      }
      .input{
        flex: 1;
        margin: {
          left: 10px;
          right: 10px;
        };
        height: 35px;
        padding-left: 10px;
        background-color: $color-grey;
        border-radius: 15px;
        font-size: 14px;
        color: silver;
        border: 0;
      }
    }
    &-more{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background-color: $color-white;
      transform: translate3d(0, 100%, 0);
      transition: transform .3s ease;
      &.active{
        transform: translate3d(0, 0, 0);
      }
    }
  }     
</style>